<template>
    <div class="storeInfo">
        <div class="all">
            <image :src="imgPath('bg2.png')" class="inner-img"></image>
            <image :src="imgPath('bg1.png')" class="inner-img"></image>
        </div>
        <div class="header-wrap">
            <div class="fix-header">
                <div class="backPage">
                    <image class="arrow_left" :src="imgPath('back.png')"></image>
                    <text class="back col_fff medium" @click="goBack">返回</text>
                </div>
                <div class="search">
                    <input type="text"   class="fix-search" placeholder="搜索店铺商品" v-model="searchText"  @return="show($event)" return-key-type="search">
                    <div class="fix-img">
                        <image :src="imgPath('search_white.png')" class="img"></image>
                    </div>
                </div>
                <image :src="imgPath('shopping.png')" class="carimg" @click="pushToShopCar"></image>
            </div>
            <div class="infomation">
                <div class="info-left">
                    <div class="storeWrap">
                        <image :src="storeList.topPicture" class="storeImg" resize="contain"></image>
                    </div>
                    <div class="info-center">
                        <text class="storeName">{{storeList.name}}</text>
                        <div class="info-bottom">
                            <div class="see">
                                <image :src="imgPath('follow.png')" class="seeImg"></image>
                                <text class="seeText" v-if="storeList.concernNumber">{{storeList.concernNumber}}</text>
                                <text class="seeText" v-if="!storeList.concernNumber">0</text>
                            </div>
                            <div class="see look">
                                <image :src="imgPath('swimsuit.png')" class="seeImg"></image>
                                <text class="seeText" v-if="storeList.goodsNumber">{{storeList.goodsNumber}}</text>
                                <text class="seeText" v-if="!storeList.goodsNumber">0</text>
                            </div>
                        </div>
                    </div>
                </div>
                <div class=" info-right"  @click="keep">
                    <text class="shoucang" :class="[storeList.isCollection? 'yellowColor': 'noCollect']">收藏</text>
                </div>
            </div>
            <div class="choose">
                <div class="choose-item" @click="timeChoose">
                    <text class="choose-text" :class="[ timeText ? 'yellow':'choose-text' ]">时间</text>
                    <div class="all-img">
                        <image :src="imgPath( time2? 'gray.png': 'big.png')" class="arrow-bigimg"></image>
                    </div>
                </div>
                <div class="choose-item price-item" @click="numChoose">
                    <text class="choose-text" :class="[ numText ? 'yellow':'choose-text' ]">销量</text>
                    <div class="all-img">
                        <image :src="imgPath( num1 ? 'gray_up.png': 'yellow_up.png' )" class="arrow-img"></image>
                        <image :src="imgPath( num2? 'gray_down.png': 'yellow_down.png')" class="arrow-img"></image>
                    </div>
                </div>
                <div class="choose-item" @click="priceChoose">
                    <text class="choose-text" :class="[ priceText ? 'yellow':'choose-text' ]">价格</text>
                    <div class="all-img">
                        <image :src="imgPath( price1? 'gray_up.png': 'yellow_up.png' )" class="arrow-img"></image>
                        <image :src="imgPath( price2? 'gray_down.png': 'yellow_down.png')" class="arrow-img"></image>
                    </div>
                </div>
            </div>
        </div>

        <div class="img-wrap">
            <scroller @loadmore="loadMore" loadmoreoffset="50">
                <div class="wrap">
                    <div class="img-list" v-for="(item) in dataList" :key="item.id" @click="pushToStoreDetail(item.id)" >
                        <image :src="item.topPicture" class="list-pic"></image>
                        <text class="introduce">{{item.goodsName}}</text>
                        <text class="price">￥{{item.discountPrice ? item.discountPrice : item.price}}/{{item.priceUnit}}</text>
                    </div>
                </div>
            </scroller>
        </div>
        <div class="footer">
            <div class="footer-item" @click="pushToInfoDetail">
                <image :src="imgPath('home.png')" class="footerImg"></image>
                <text class="footerText">店铺详情</text>
            </div>
            <div class="footer-item" @click="callService">
                <image :src="imgPath('concactgongyingshang.png')" class="footerImg"></image>
                <text class="footerText">联系供应商</text>
            </div>
        </div>
        <Dialog :show="showDialog" @close="hideDialog">
            <text class="dialog-title">商店服务电话</text>
            <text class="phoneNumber">{{storeList.telephone ? storeList.telephone : '0595-82835151'}}</text>
            <div class="callPhone-wrapper flex_row">
                <text class="callPhone" @click="handleCall">拨打电话</text>
            </div>
        </Dialog>
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import {storeGoods, infoDetail, myCollect, cancelCollect} from '@/api/store'
import Dialog from '@/components/dialog'
import { WxcLoading } from 'weex-ui'
import Nat from 'natjs'
const storage = weex.requireModule('storage')
const modal = weex.requireModule('modal')
export default {
  name: 'storeInfo',
  data () {
    return {
      userId: '',
      timeText: false, // 时间颜色控制
      numText: false, // 数量颜色控制
      priceText: false, // 价格颜色控制
      time1: true, // 时间图标切换
      time2: true,
      num1: true, // 销量图标
      num2: true,
      price1: true, // 价格图标
      price2: true,
      pageNo: 1, // 当前页
      pageSize: 6, // 每页的数量
      shangpuId: '', // 商铺id
      dataList: [],
      keyword: '',
      concernNumber: '',
      shopPic: '',
      shopName: '',
      goodsNumber: '',
      searchText: '',
      storeList: {},
      shoucang: true,
      showDialog: false,
      needMask: true, // 显示蒙版
      hasMore: true,
      numIndex: '',
      priceIndex: '',
      loadingShow: true // loading
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    pushToInfoDetail () {
      this.$router.push({path: 'infoDetail', query: {shopsId: this.shangpuId}})
    },
    numChoose () {
      const that = this
      that.numText = true
      that.shangpuId = that.$route.query.shopsId
      that.dataList = []
      if (that.num1) {
        that.num1 = false
        that.num2 = true
        that.numIndex = 1
        that.pageNo = 1
        that.dataList = []
        that.hasMore = true
        that.getDataList()
      } else {
        that.num1 = true
        that.num2 = false
        that.numIndex = 2
        that.pageNo = 1
        that.dataList = []
        that.hasMore = true
        that.getDataList()
      }
    },
    // 价格选择
    priceChoose () {
      const that = this
      that.priceText = true
      that.dataList = []
      that.shangpuId = that.$route.query.shopsId
      if (that.price1) {
        that.price1 = false
        that.price2 = true
        that.priceIndex = 1
        that.pageNo = 1
        that.dataList = []
        that.hasMore = true
        that.getDataList()
      } else {
        that.price2 = false
        that.price1 = true
        that.priceIndex = 2
        that.pageNo = 1
        that.dataList = []
        that.hasMore = true
        that.getDataList()
      }
    },
    // 时间选择
    timeChoose () {
      const that = this
      that.dataList = []
      that.shangpuId = that.$route.query.shopsId
      that.timeText = true
      that.time2 = false
      that.pageNo = 1
      that.hasMore = true
      that.dataList = []
      that.getDataList()
    },
    // 手机键盘确认事件
    show (ev) {
      const that = this
      that.dataList = []
      that.shangpuId = that.$route.query.shopsId
      that.pageNo = 1
      that.hasMore = true
      that.dataList = []
      that.getDataList()
    },
    // 点击进行收藏
    keep () {
      const that = this
      let params = {
        goodsId: '',
        shopId: that.$route.query.shopsId,
        type: 2
      }
      that.loadingShow = true
      if (!that.storeList.isCollection) {
        that.$api.post(myCollect, params, function (res) {
          that.loadingShow = false
          modal.toast({
            message: '收藏成功'
          })
          that.storeList.isCollection = true
        }, function () {
          that.loadingShow = false
        }, true)
      } else {
        that.$api.post(cancelCollect, params, function (res) {
          that.loadingShow = false
          that.storeList.isCollection = false
          modal.toast({
            message: '取消收藏'
          })
        }, function () {
          that.loadingShow = false
        }, true)
      }
    },
    // 进入到商品详情
    pushToStoreDetail (id) {
      const that = this
      that.$router.push({path: '/store/storeDetail', query: {goodsId: id, shoucang: that.shoucang}})
    },
    // 跳转到购物车
    pushToShopCar () {
      const that = this
      that.$router.push('/store/shoppingCar')
    },
    // 联系客服
    callService () { // 联系客服
      this.showDialog = true
    },
    hideDialog () { // 关闭对话框
      this.showDialog = false
    },
    handleCall () { // 拨打电话
      const that = this
      let str = that.storeList.telephone ? that.storeList.telephone : '0595-82835151'
      Nat.call(str)
    },
    // 加载更多
    loadMore () { // 加载更多
      const that = this
      if (!that.hasMore) {
        return
      }
      that.pageNo++
      that.getDataList()
    },
    getDataList () {
      const that = this
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pageSize,
        shopsId: that.shangpuId,
        dateSort: 1,
        priceSort: that.priceIndex,
        salesSort: that.numIndex,
        keyword: that.searchText
      }
      that.loadingShow = true
      that.$api.get(storeGoods, params, function (res) {
        that.loadingShow = false
        let list = res.data.records
        if (list.length <= 0) {
          that.hasMore = false
          modal.toast({
            message: '没有数据了~'
          })
          return
        }
        that.dataList = that.dataList.concat(list)
      }, function () {
        that.loadingShow = false
      })
    }
  },
  mounted: function () {
    const that = this
    that.shangpuId = that.$route.query.shopsId
    storage.getItem('userId', event => {
      if (event.result === 'success') {
        that.userId = event.data
        let params = {}
        params.userId = that.userId ? that.userId : ''
        that.loadingShow = true
        that.$api.get(infoDetail + '/' + that.shangpuId, params, function (res) {
          that.storeList = res.data
          that.loadingShow = false
        }, function () {
          that.loadingShow = false
        })
      }
    })
    that.getDataList()
  },
  components: {
    Dialog,
    WxcLoading
  }
}
</script>

<style scoped>
    .all {
        width: 750px;
    }

    .inner-img {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 750px;
    }

    .header-wrap {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    .fix-header {
        height: 88px;
        padding-top: 14px;
        padding-bottom: 14px;
        align-items: center;
        /*position: relative;*/
        display: flex;
        flex-direction: row;
    }

    .backPage {
        flex-direction: row;
        align-items: center;
        height: 88px;
        padding-right: 32px;
        padding-left: 24px;
    }

    .arrow_left {
        width: 24px;
        height: 40px;
        margin-right: 16px;
    }

    .back {
        font-size: 34px;
        line-height: 88px;
        color: #fff;
    }

    .search {
        align-items: center;
        /*display: flex;*/
        flex-direction: row;
        justify-content: space-between;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-color: rgb(206, 206, 206);
        border-width: 1px;
        border-style: solid;
        width: 496px;
        height: 63px;
        background-color: rgb(43, 48, 64);
    }

    .fix-img {
        width: 64px;
        height: 60px;
        align-items: center;
        background-color: rgb(43, 48, 64);
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-left: -1px;
    }

    .img {
        width: 28px;
        height: 28px;
        margin-top: 15px;
    }

    .fix-search {
        height: 60px;
        width: 430px;
        border: none;
        background-color: rgb(43, 48, 64);
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        font-size: 24px;
        color: rgb(206,206,206);
        padding-left: 15px;
    }

    .carimg {
        width: 40px;
        height: 40px;
        margin-left: 20px;
    }

    .infomation {
        flex-direction: row;
        justify-content: space-between;
        padding-left: 24px;
        padding-right: 24px;
        margin-top: 55px;
        align-items: center;
        padding-bottom: 40px;
    }

    .info-left {
        flex-direction: row;
    }

    .storeWrap {
        width: 180px;
        height: 132px;
        background-color: #fff;
        flex-direction: row;
        align-items: center;
        border-radius: 10px;
    }

    .storeImg {
        width: 180px;
        height:132px;
    }

    .info-center {
        width: 300px;
        flex-direction: row;
        flex-wrap: wrap;
        flex-direction: column;
        margin-left: 15px;
    }

    .see {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .seeImg {
        width: 42px;
        height: 42px;
        margin-right: 14px;
    }

    .seeText {
        font-size: 24px;
        color: rgb(134, 134, 134);
    }

    .look {
        margin-left: 70px;
    }

    .storeName {
        font-size: 28px;
        font-family: medium;
        color: rgb(255, 255, 255)
    }

    .info-bottom {
        flex-direction: row;
        margin-top: 25px;
    }

    .info-right {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .concernText {
        width: 120px;
        height: 50px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(254, 203, 1);
        color: rgb(254, 203, 1);
        text-align: center;
        line-height: 50px;
        font-size: 26px;
        border-radius: 10px;
    }

    .choose {
        height: 65px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    .choose-item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .choose-text {
        font-size: 28px;
        color: rgb(206, 206, 206);
        font-weight: bold;
        margin-right: 12px;
    }

    .img-wrap {
        position: fixed;
        top: 400px;
        left: 0;
        right: 0;
        bottom: 96px;
    }

    .wrap {
        justify-content: space-between;
        padding-top: 8px;
        padding-bottom: 30px;
        padding-left: 24px;
        padding-right: 24px;
        flex-direction: row;
        flex-wrap: wrap;
        width: 750px;
        /*          */
    }

    .img-list {
        width: 343px;
        /*flex-wrap: wrap;*/
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        margin-bottom: 16px;
        padding-bottom: 29px;
        box-shadow: 0px 0px 10px 3px rgba(43, 48, 64, 0.12);
        background-color: #fff;
        border-style: solid;
        border-width: 1px;
        border-color: #ebebeb;
        background-color: #fff;
        /*float: left;*/
    }

    .list-pic {
        width: 343px;
        height: 343px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
    }

    .introduce {
        font-size: 26px;
        text-overflow: ellipsis;
        padding-left: 24px;
        padding-right: 24px;
        margin-top: 24px;
        color: rgb(70, 70, 70);
        lines: 1;
    }

    .price {
        font-size: 28px;
        color: rgb(254, 203, 1);
        margin-top: 28px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 96px;
        background-color: rgb(255, 255, 255);
        flex-direction: row;
        border-top-style: solid;
        border-top-color: #ebebeb;
        border-top-width: 1px;
    }

    .footer-item {
        width: 375px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .footerImg {
        width: 40px;
        height: 36px;
    }

    .footerText {
        font-size: 24px;
        color: rgb(70, 70, 70);
        font-family: medium;
        margin-top: 7px;
    }

    .arrow-img {
        width: 24px;
        height: 12px;
        margin-top: 3px;
    }

    .arrow-bigimg {
        width: 24px;
        height: 24px;
    }
    .dialog-title {
        font-size: 28px;
        text-align: center;
        color: #464646;
        font-family: medium;
    }
    .phoneNumber {
        margin-top: 60px;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
    }
    .callPhone-wrapper {
        margin-top: 50px;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }
    .callPhone {
        width: 278px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        border-radius: 8px;
        background-color: #2b3040;
    }
    .shoucang{
        font-size:24px;
       color: rgb(134, 134, 134);
        border-width: 1px;
        border-style: solid;
        border-color: rgb(134, 134, 134);
        padding-left: 35px;
        padding-right: 35px;
        height: 50px;
        line-height: 50px;
        border-radius: 10px;
    }
    .yellowColor {
        color:rgb(254,203,1);
        border-radius: 10px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(254,203,1);
    }
    .yellow{
        color:rgb(254,203,1);
    }
    .noCollect{
        border-radius: 10px;
    }
</style>
